<template>
	<div class="dropdown-box" >
		<div @click="show = true"><slot></slot></div>
		<div v-if="show" class="dropdown">
			<div class="mask" @click="show = false"></div>
			<slot name="content"></slot>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				show: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../assets/css/base.scss';
	.dropdown-box{
		position: relative;
		z-index: 99;
		display: inline-block;
		.dropdown{
			position: absolute;
			top: 100%;
			right: 0;
			background: #fff;
			border-radius: 5px;
			box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1);
		}
		ul{
			min-width: 170px;
			position: relative;
			z-index: 2;
		}
		li{
			padding: 0 1em;
			height: 44px;
			display: flex;
			align-items: center;
			border-bottom: solid 1px #f5f5f5;
			&:hover{
				background: $hover;
			}
			&:last-of-type{
				border: 0;
			}
		}
	}
</style>
